<template>
  <view>
<!--    @change="change"-->
<!--    @click="click"-->
    <view style="background-color: white;width: 100%" @click="search">
      <uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索"   clearButton="none" cancelButton="none"/>
    </view>
    <u-swiper
        :list="list1"
    ></u-swiper>

    <view>
      <u-grid
          :border="false"
          col="3"
      >
        <u-grid-item
            v-for="(listItem,listIndex) in fList"
            :key="listIndex"
            @click="selectItem(listItem)"
        >
          <u-image :showLoading="true" :src="listItem.url" width="40px" height="40px"></u-image>
          <text class="grid-text">{{listItem.title}}</text>
        </u-grid-item>
      </u-grid>
      <u-toast ref="uToast"/>
    </view>

    <view>



    </view>


    <mk-goods-list v-if="update" :goods="goods" @clickItem="goodsItem"></mk-goods-list>
  </view>
</template>

<script>

import {mainService} from "../../../api/buyer/main";
import {BASE_IMG_URL} from "../../../api/service";
import {attachmentService} from "../../../api/buyer/public/attachmentService";

export default {
  data() {
    return {
      goods:[

      ],
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
      fList:[
        {
          title:"新品",
          url:"/static/images/buyer/main/new.png"
        },
        {
          title:"爆款",
          url:"/static/images/buyer/main/hot.png"
        },
        {
          title:"秒杀",
          url:"/static/images/buyer/main/miaosha.png"
        }
      ],
      update:true

    }
  },
  created() {
    this.init()
  },
  onPullDownRefresh() {
    this.init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
      this.update=false
      this.update=true
    }, 1000);
  },
  methods: {
    init(){
      const queryParams = {}
      queryParams.currentPage = 1
      queryParams.pageSize = 6
      queryParams.orderBys=[
        {
          property:"createDatetime",
          order:"desc"
        }
      ]
      mainService.findCommoditys(queryParams).then((res)=> {
        this.goods=[]
        let resData = res.data.datas;
        if (resData && resData.length != 0) {
          resData.forEach((res => {
            // console.log(res,BASE_URL,res.attachments.length!=0?res.attachments[0].attachmentAddr:"")
            let good = {};
            good.id = res.eid
            good.name = "Commodity"
            good.img =""
            good.title = res.description
            good.littleTitle = res.shopName
            good.amount = "￥"+res.minPrice
            good.amountRemark = (res.saleNum?res.saleNum:0)+" 已购买"
            // good.lable = "包邮"
            good.commodity = res
            this.goods.push(good)
          }))
          this.loadImage()
        }

      })
    },

    loadImage(){
      //懒加载图片
      this.goods.forEach(good => {
        if (!good.img||good.img==="") {
          if (good.id && good.name) {
            attachmentService.findFile(good.id, good.name).then((res) => {
              good.img = BASE_IMG_URL + res.data[0].attachmentAddr
            })
          }
        }
      })
    },
    goodsItem(item){
      // console.log(item)
      uni.navigateTo({
        url: '/pages/buyer/main/goodDetailed?good=' + encodeURIComponent(JSON.stringify(item.commodity)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    goSkill(){
      uni.navigateTo({
        url: '/pages/buyer/Skill/skillIndex',
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    goNew(){
      uni.navigateTo({
        url: '/pages/buyer/newCommodity/index',
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    goHot(){
      uni.navigateTo({
        url: '/pages/buyer/hotCommodity/index',
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    selectItem(item){
      if(item.title=='秒杀'){
        this.goSkill();
        return;
      }
      if(item.title=='爆款'){
        this.goHot();
        return;
      }
      if(item.title=='新品'){
        this.goNew();
        return;
      }
    },
    search(){
      uni.navigateTo({
        url: '/pages/buyer/public/Search/index',
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    }
  },

}
</script>

<style scoped>
.demo-layout {
  height: 100 rpx;
  border-radius: 8 rpx;
  text-align: center;
  padding: 10 rpx;
  box-shadow: 0px 0 60 rpx #F7F8F7 !important;
  padding: 10 rpx;
  border-radius: 20 rpx;
  background-color: #ef0a0a;
}

.main-statistics {
  width: 92%;
  height: 180 rpx;
  margin: 20 rpx auto auto;
  background-color: white
}

.current-shipping-content {
  width: 100%;
  min-height: 300 rpx;
  height: auto;
  margin-top: 20 rpx;
  /*background-color: white;*/
  padding-bottom: 50 rpx;
}

.textColor {
  color: #a0a1aa;
  font-size: 24 rpx;
}

/deep/ .u-tag {
  padding: 4 rpx 10 rpx
}

/deep/ .u-card__head {
  padding: 0px !important;
}

/deep/ .u-card__body {
  padding: 0px !important;
}

/deep/ .u-card__foot {
  padding: 0px !important;
}

.u-row {
  margin: 10 rpx 0;
}

.shipping-card {
  /*padding:10px;*/
  box-shadow: 0px 0 60 rpx #F7F8F7 !important;
}

/deep/ .shipping-card .u-row {
  padding: 4 rpx;
}
</style>
<style>
page {
  background-color: #F7F8F7;
}

.title {
  font-weight: 600;
  margin-left: 10 rpx;
  border-left: #10aeff solid 10 rpx;
  padding-left: 10 rpx;
  font-size: 15px;
}

.u-card {
  padding: 20 rpx;
  border-radius: 40 rpx !important;
  font-size: 28 rpx;
}
</style>
